


body footer.cmp-bar.page-footer{
  position: relative;
  z-index: 4;
}
.page-footer {
  height: 50px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 1px 0px 0px rgba(228, 228, 228, 1);
  //filter: blur(10px);
  .item {
    text-align: center;
    max-width: 100%;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    p{
      color: #7A7E83;
    }
    display: inline-block;
    &.active{
      p{
        color: #3AADFB;
      }
      .icon-warp{
        .now{
          display: initial;
        }
        .not{
          display: none;
        }
      }
    }
    .click-zone{
      min-width: 40px;
      display: inline-block;

    }
  }
  p.icon-warp {
    font-size: 24px;
    min-height: 24px;
    line-height: 100%;
    .now{
      display:none;
    }
    .not{
      display: initial;
    }
    .icon:before{
      font-size: 24px;
    }
    padding-bottom: 2px;
  }
  p.title {
    line-height: 100%;
    font-weight: 400;
    font-size: 12px;
  }
}

#main-view{
  .page-view{
    display: none;
    &.active{
      display: -webkit-box;
      display: -webkit-flex;
      display: flex;
    }
  }
}


#clock-page{
  .clock-detail-zone{
    background-color: #ffffff;
  }
.localResult{
  box-shadow:0px 0px 10px 0px rgba(0,0,0,0.04);
}
  .clock-list{

    padding: 30px 22px 11px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    &::-webkit-scrollbar{
      display: none;
      opacity: 0;
      visibility: hidden;
      width: 0;
    }

    .list-warp{
      position: relative;
      border-left: 2px solid #F3F3F3;
      //border-right: none;
      //-webkit-border-image:-webkit-linear-gradient(top,#E4E4E4 0%,#F3F3F3 100%);
      //border-image: -webkit-linear-gradient(top,#E4E4E4 0%,#F3F3F3 100%);
    }
    .item-clock{
      &:last-of-type{
        .space{
          display: none;
        }
      }
      &.active{
        .item-title{
          color: #000;
        }
      }
    }

    .info-warp.can-clock~.space{
      display: none;
    }
    .space{
      height: 20px;
    }
    .item-clocked-info-list{
      padding: 0 4px 10px 15px;
    }
    .info-item{
      padding: 10px 12px;
      background:rgba(255,255,255,1);
      box-shadow:0px 0px 10px 0px rgba(0,0,0,0.06);
      border-radius:4px;
      margin-top: 20px;
      p.title{
        color: #000000;
        .again{
          float: right;
          padding-right: 5px;
          color: #3AADFB;
          cursor: pointer;
        }
        .status{
          margin-left:15px;
          &.normal{
            color: #61B109;
          }
          &.later{
            color: #FF5E5E;
          }
        }
      }
      p.address{
        margin-top: 6px;
        color: #999999;
      }
    }
    .item-title{
      &:before{
        position: absolute;
        width:10px;
        height:10px;
        z-index: 4;
        content: "";
        background-color: #3AADFB;
        border-radius: 5px;
        left:-6px ;
        top: 10px;
      }
      position: relative;
      padding-left: 28px;
      font-weight:400;
      color:#A1B0C5;
      line-height:30px;
      font-size: 22px;
      height: 30px;
      .time-type{
        font-size: 14px;
      }
    }
    .item-clocking{
      margin-top: 20px;
      text-align: center;
      .clocking-button{
        width:120px;
        height:120px;
        margin: 0 auto;
        background: #B6B6B6;
        border-radius:60px;
        margin-bottom: 10px;
        color: #ffffff;
        &.normal{
          background:linear-gradient(115deg,rgba(0,229,255,1) 0%,rgba(0,103,255,1) 100%);
          box-shadow:0px 0px 20px 0px rgba(58,173,251,0.6);
        }
        &.deny{
          background: #B6B6B6;
        }
        &.warning{
          background:linear-gradient(132deg,rgba(255,181,58,1) 0%,rgba(255,130,60,1) 100%);
          box-shadow:0px 0px 20px 0px rgba(255,153,0,0.4)
        }
        .time{
          font-size: 28px;
          line-height: 40px;
        }
        .type{
          margin-top: 3px;
        }
      }
      .clocking-title{
        margin: 0 auto;
        font-weight:400;
        color:rgba(162,172,199,1);
      }
      .go-out-clock{
        margin-top: 6px;
        color:#3AADFB ;
      }
    }
  }
  .no-need-punch{
 text-align: center;
    color: #A2ACC7;
    .icon{
      font-size: 50px;
      line-height: 100%;
      margin-bottom: 14px;
      &:before{
        font-size: inherit;
      }
      color: #B6BED4;
    }
    .tips{

    }
    .text{

    }
  }
}
#statistics-page {
  background-color: #F8F9FB;
  .nav-menu-list {
    background-color: #ffffff;
    border-top: 0.5px solid #F8F9FB;
    height: 40px;
    .nav-item {
      font-size: 0;
      color: #666666;
      &.active{
        color: #040404;
        font-weight: bold;
        .text{
          &:after{
            display: inline-block;
          }
        }
      }
      .text {
        position: relative;
        display: inline-block;
        height: 40px;
        line-height: 40px;
        white-space: nowrap;
        &:after {
          content: "";
          display: none;
          width: 30px;
          height: 3px;
          border-radius: 1.5px;
          background-color: #3AADFB;
          position: absolute;
          left: 50%;
          bottom: 0;
          -webkit-transform: translateX(-50%);
          transform: translateX(-50%);

        }
      }
    }
  }
}
#statistics-month{
  .select-zone{
    color: #51AFF7;
    padding: 0 14px;
    height: 40px;
    *{
      line-height: 100%;
    }
    div.person-num{
      color:#999999 ;
    }
    div>span{
      font-size: inherit;
      &:before{
        font-size: inherit;
      }
    }
  }
  .list-zone{
    .tips-in-month{
      padding: 6px 14px;
      color:#999999 ;
    }
    .list-item{
      padding-left: 14px;
      &:last-of-type{
        .item-title{
          border-bottom: none;
        }
      }
      .item-title{
        height:50px;
        border-bottom:1px solid #E4E4E4;
        position: relative;
        background-color: #ffffff;
        padding-right: 32px;
        .title{
          color: #333333;
        }
        .num{
          color: #666666;
          &.gray{
            color: #999999;
          }
        }
        .icon{
          position: absolute;
          right: 14px;
          top: 14px;
          font-weight: bold;
          display: block;
          color: #D4D4D4;
          -webkit-transform: rotate(-90deg);
        }
      }
      .item-group{
        padding: 10px 0 10px 14px;
        color: #333333;
        p{
          margin-bottom: 10px;
          &:last-of-type{
            margin-bottom: 0;
          }
        }
      }
    }
  }
}
#statistics-person{
  .select-zone{
    color: #51AFF7;
    padding: 0 14px;
    height: 40px;
    *{
      line-height: 100%;
    }
    div>span{
      font-size: inherit;
      &.see-icon-m3-schedule{
        font-size: 20px;
      }
      &:before{
        font-size: inherit;
      }
    }
  }
  .list-zone{
    .list-item{
      &.noData{
        .icon{
          display: none;
        }
        .item-group{
          display: none;
        }
      }
      &:last-of-type{
        .item-title{
          .warp{
            border-bottom: none;
          }
        }
      }
      &.active{
        .item-group{
          display: block;
        }
        .item-title{
          .warp{
            border-bottom: none;
          }
          .icon{
            -webkit-transform: rotate(180deg);
          }
        }

      }
      .item-title{
        background-color: #ffffff;
        .warp{
          height:48px;
          border-bottom:1px solid #E4E4E4;
          position: relative;
          background-color: #ffffff;
          padding-right: 38px;
        }
        padding-left: 14px;
        .title{
          color: #333333;
        }
        .num{
          //color: #666666;
          //&.warning{
          //  color: #FF5E5E;
          //}
        }
        .icon{
          position: absolute;
          right: 14px;
          top: 14px;
          font-weight: bold;
          display: block;
          color: #D4D4D4;
          -webkit-transform: rotate(0);
          transition: -webkit-transform 200ms;
        }
      }
      .item-group{
        display: none;
        padding: 10px 0 10px 14px;
        color: #333333;
        p{
          margin-bottom: 10px;
          &:last-of-type{
            margin-bottom: 0;
          }
        }
      }
    }
  }
}
#statistics-day{
  .page-warp{
    padding: 14px;
  }
  .department-list-zone{
    margin-top: 4px;
    background:rgba(255,255,255,1);
    border-radius:0px 0px 8px 8px;
    padding: 3px 10px 10px;
    color: #666666;
    .item{
      height: 34px;
      p.num{
        span{
          color: #FF9900;
        }
      }
    }

  }
  .chart-zone{
    height:300px;
    background:#ffffff;
    border-radius:8px 8px 0px 0px;
  }
  .select-zone{
    color: #51AFF7;
    padding: 0 14px;
    height: 40px;
    border-bottom: 1px solid #EFEFEF;
    *{
      line-height: 100%;
    }
    div>span{
      font-size: inherit;
      &:before{
        font-size: inherit;
      }
    }
  }
  .chart-warp{
   height: 202px;
   .circle-warp{
     width: 150px;
     height: 150px;
     position: relative;
     border-radius: 50%;
     box-shadow:0px 0px 14px 0px rgba(58,173,251,0.2);
     border:10px solid #9BCDFF;
   .data-info{
     text-align: center;
     color:#000000 ;
     .num{
       color: #666666;
       span{
         font-size: 1.4rem;
         color: #1C6EFB;
       }
     }
   }
     svg{
       -webkit-transform-origin: center center;
       transform-origin: center center;
       -webkit-transform: rotate(-90deg);
       transform: rotate(-90deg);
       height: 150px;
       width: 150px;
       left: -10px;
       top: -10px;
       position: absolute;
       //background-color: transparent;
       z-index: 2;
     }
   }
  }
  .clock-type-menu{
    padding: 2px;
    .item{
      text-align: center;
      .item-warp{
        text-align: center;
        display: inline-block;
        color: #333333;
        .warning{
  color: #FF9900;
        }
        .error{
          color:#FF5E5E ;
        }
        .normal{
          color:#1F85EC ;
        }
      }
    }

  }
}
#statistics-top{
  .select-zone{
    color: #51AFF7;
    padding: 0 14px;
    height: 40px;
    *{
      line-height: 100%;
    }
    div.person-num{
      color:#999999 ;
    }
    div>span{
      font-size: inherit;
      &:before{
        font-size: inherit;
      }
    }
  }
  .list-zone{
    padding: 0 10px;
  }
  .top-item{
    height:66px;
    background:rgba(255,255,255,1);
    border-radius:6px;
    padding: 0 10px 0 13px;
    .num-text{
      text-align: left;
      width: 26px;
      color: #AAB5BC;
    }
    .user-header{
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: no-repeat center;
      background-size: cover;
      background-color:#E4E4E4 ;
    }
    .user-info-zone{
      padding-left: 15px;
      white-space: nowrap;
    }
    .user-info{
      .username{
  color: #333333;
      }
      .department{
        color: #999999;
      }
    }
    .clock-time{
      font-weight:500;
      color: #FCB058;
    }
  }
  .top-item~.top-three-zone{
    margin-top: 10px;
  }
  .three-item{
    color: #ffffff;
    text-align: center;
    &.one{
    position: absolute;
      left: 50%;
      -webkit-transform: translate(-50%, 0);
      transform: translate(-50%, 0);
      top:2200/341%;
    }
    &.two{
      position: absolute;
      left:2900/355% ;
      top: 6600/341%;
    }
    &.three{
      position: absolute;
      right:3200/355% ;
      top: 8800/341%;
    }
    .time{
      font-size:24px;
  font-weight: 600;
      line-height: 33px;
    }
    .name{
 font-weight: 400;

    }
    .user-info{
      margin-top: 6px;
      border-radius: 50%;
      padding: 3px;
      border: 4px solid rgba(255, 255, 255, 0.36);

    }
    .header{
      width: calc((100vw - 20px) * 68 / 355);
      width: -webkit-calc((100vw - 20px) * 68 / 355);
      height: calc((100vw - 20px) * 68 / 355);
      height: -webkit-calc((100vw - 20px) * 68 / 355);
      border-radius: 50%;
      background: no-repeat center;
      background-size: cover;
      background-color:#E4E4E4 ;
    }
  }
  .top-three-zone{
    position: relative;
    font-size: 0;
    border-radius: 6px 6px 0 0;
    background-color: #ffffff;
    min-height: -webkit-calc((100vw - 20) * 341 / 355);
    min-height: calc((100vw - 20) * 341 / 355);
    img{
      width: 100%;
      height: auto;
    }
  }
}